<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../layui/css/layui.css" rel="stylesheet" />
</head>
<body>

<form class="layui-form" action="" style="margin: 10px">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">选择类型</label>
            <div class="layui-input-block">
                <select name="userType" id="userType" lay-filter="xmFilter">
                    <option value=""></option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" name="account" id="account" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" name="userName" id="userName" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
            </div>
        </div>
    </div>
</form>


<table class="layui-hide" id="test"></table>

<script type="text/html" id="checkboxTpl">
    {{#  if(d.status == 1){ }}
    <input type="checkbox" name="lock" value="{{d.id}}" title="禁用" lay-filter="lockDemo" checked/>
    {{#  } else { }}
    <input type="checkbox" name="lock" value="{{d.id}}" title="禁用" lay-filter="lockDemo"/>
    {{#  } }}
</script>

<!-- 注意：项目正式环境请勿引用该地址 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['form', 'upload', 'layer','table'], function(){
        var table = layui.table
            ,form = layui.form
            ,$=layui.$;

        $.ajax({
            url: 'http://localhost:8090/sysuser/userType',
            type: 'post',
            success: function (data) {
                console.log(data);
                $.each(data.data, function (index,value) {
                    $("#userType").append(new Option(value.roleName));
                });
                layui.form.render("select");
            }
        })


        table.render({
            elem: '#test'
            ,height:'full'
            ,url: 'http://localhost:8090/sysuser/select'
            ,response:{
                statusName: 'code' ,// 对应 code
                msgName: 'msgg' , // 对应 msg
                dataName: 'data' // 对应 data
            }
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code ==  200 ? 0 : res.code, //解析接口状态
                    "data": res.data //解析数据列表
                };
            }
            ,method:'post'
            ,cellMinWidth: 0
            ,cols: [[
                {field:'id', title: '编号', width:80, sort: true}
                ,{field:'roleName', title: '用户类型', width:120}
                ,{field:'account', title: '账号', width:250, sort: true}
                ,{field:'userName', title: '用户名', width:200}
                ,{field:'createdTime', title: '创建时间'}
                ,{field:'createdUserId', title: '创建人ID', sort: true, width:120}
                ,{field:'status', title:'是否启用', width:110, templet: '#checkboxTpl', fixed: 'right'}
            ]]
        });

        //监听禁用操作
        form.on('checkbox(lockDemo)', function(obj){
            var flag = obj.elem.checked;
            var id = this.value;
            console.log(flag,id);
            $.ajax({
                url:'http://localhost:8090/sysuser/status',
                type:'post',
                data:{
                    "id":this.value,
                    "flag":obj.elem.checked
                },
                success:function (data){
                    console.log(data);
                }
            })
        });

        //监听提交
        form.on('submit(formDemo)', function(){
            table.render({
                elem: '#test'
                ,height:'500'
                ,url: 'http://localhost:8090/sysuser/select'
                ,where:{
                    'account':$("#account").val(),
                    'userName':$("#userName").val(),
                    'userType':$("#userType").val()
                }
                ,response:{
                    statusName: 'code' ,// 对应 code
                    msgName: 'msgg' , // 对应 msg
                    dataName: 'data' // 对应 data
                }
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code ==  200 ? 0 : res.code, //解析接口状态
                        "data": res.data //解析数据列表
                    };
                }
                ,method:'post'
                ,cellMinWidth: 0
                ,cols: [[
                    {field:'id', title: '编号', width:80, sort: true}
                    ,{field:'roleName', title: '用户类型', width:120}
                    ,{field:'account', title: '账号', width:250, sort: true}
                    ,{field:'userName', title: '用户名', width:200}
                    ,{field:'createdTime', title: '创建时间'}
                    ,{field:'createdUserId', title: '创建人ID', sort: true, width:120}
                    ,{field:'lock', title:'是否启用', width:110, templet: '#checkboxTpl', unresize: true}
                ]]
            });
            return false;
        });
    });
</script>
</body>
</html>